MVVM প্যাটার্নে View এমন একটি উপাদান যা ViewModel থেকে ডেটা প্রাপ্ত করে এবং সেটি ব্যবহারকারীর কাছে প্রদর্শন করে। View সাধারণত UI উপাদানগুলির মাধ্যমে ViewModel এর সাথে যোগাযোগ করে, যেখানে XAML (Extensible Application Markup Language) ব্যবহৃত হয় UI তৈরি করতে। XAML একটি declarative মার্কআপ ভাষা, যা UI উপাদানগুলি, তাদের বৈশিষ্ট্য এবং ডেটা বাইন্ডিং নির্ধারণ করতে সাহায্য করে।

এখানে View তৈরি করার এবং XAML ব্যবহার করার পদ্ধতি ব্যাখ্যা করা হলো।

View তৈরি করার প্রাথমিক ধারণা

View হল অ্যাপ্লিকেশনের UI অংশ, যা সরাসরি ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করে। MVVM প্যাটার্নে, View সাধারণত ViewModel এর সাথে ডেটা বাইন্ডিংয়ের মাধ্যমে যোগাযোগ করে, কিন্তু এটি কখনও সরাসরি Model বা বিজনেস লজিকের সাথে কাজ করে না।

View তৈরি করার প্রধান পদক্ষেপ:

1. UI উপাদান নির্বাচন: UI উপাদান যেমন বাটন, টেক্সটবক্স, লেবেল ইত্যাদি নির্বাচন করতে হবে, যা View তৈরি করবে।
2. XAML কোড লিখন: UI উপাদানগুলির জন্য XAML কোড লিখে তাদের বৈশিষ্ট্য নির্ধারণ করা হয়। এর মাধ্যমে UI গঠন এবং ফর্ম্যাটিং করা হয়।
3. ViewModel এর সাথে ডেটা বাইন্ডিং: ViewModel এর ডেটা View-এ প্রদর্শন করতে ডেটা বাইন্ডিং ব্যবহার করা হয়।

XAML ব্যবহার

XAML হল একটি declarative ভাষা যা .NET Framework-এর জন্য UI ডিফাইন করতে ব্যবহৃত হয়, বিশেষত WPF (Windows Presentation Foundation) এবং Xamarin (মোবাইল অ্যাপ্লিকেশন) অ্যাপ্লিকেশনগুলির ক্ষেত্রে। XAML এ UI উপাদানগুলো এমনভাবে সাজানো থাকে, যা অ্যাপ্লিকেশনটির দর্শনীয় অংশকে পরিচালনা করে এবং সহজে অ্যাক্সেসযোগ্য করে তোলে।

XAML এর মৌলিক গঠন

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBox Name="txtName" Width="200" Height="30" Margin="10" />
        <Button Content="Click Me" Width="100" Height="30" Margin="10,50,10,10" />
        <Label Content="Hello, World!" Width="200" Height="30" Margin="10,100,10,10" />
    </Grid>
</Window>

এখানে:

• Window হলো UI উইন্ডো, যেখানে সমস্ত UI উপাদান রাখা হয়।
• Grid হলো একটি কন্টেইনার যা অন্যান্য উপাদানগুলোকে নির্দিষ্ট সেল বা লেআউটে অবস্থান দিতে সহায়তা করে।
• TextBox, Button, এবং Label হলো UI উপাদান, যা ব্যবহারকারী ইনপুট গ্রহণ বা আউটপুট প্রদর্শন করতে ব্যবহার হয়।

XAML এ Data Binding

MVVM প্যাটার্নে Data Binding খুবই গুরুত্বপূর্ণ, কারণ এটি View এবং ViewModel এর মধ্যে ডেটার সিঙ্ক্রোনাইজেশন তৈরি করে। XAML এ ডেটা বাইন্ডিং ব্যবহার করা খুবই সহজ। Binding ট্যাগের মাধ্যমে View এবং ViewModel এর মধ্যে ডেটা ট্রান্সফার করা যায়।

Data Binding উদাহরণ

XAML-এ Data Binding ব্যবহার করার জন্য, আপনাকে ViewModel এর প্রপার্টি-র সাথে UI উপাদান এর বৈশিষ্ট্য বাইন্ড করতে হবে। এখানে একটি সাধারণ উদাহরণ দেওয়া হলো:

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>

    <Grid>
        <!-- Binding to ViewModel's Name property -->
        <TextBox Text="{Binding Name}" Width="200" Height="30" Margin="10" />
        
        <!-- Binding to ViewModel's Age property -->
        <TextBox Text="{Binding Age}" Width="200" Height="30" Margin="10,50,10,10" />
        
        <!-- Button that triggers Command -->
        <Button Content="Submit" Command="{Binding SubmitCommand}" Width="100" Height="30" Margin="10,100,10,10" />
    </Grid>
</Window>

এখানে:

• Window.DataContext: এটি View এর ডেটা কন্টেক্সট সেট করে, যা ViewModel এর একটি ইনস্ট্যান্স হতে হবে।
• TextBox এর Text প্রপার্টি ViewModel এর Name প্রপার্টির সাথে বাইন্ড করা হয়েছে।
• Button এর Command প্রপার্টি ViewModel এর SubmitCommand কমান্ডের সাথে বাইন্ড করা হয়েছে।

ViewModel এর কোড হবে কিছুটা এই রকম:

public class MainViewModel : INotifyPropertyChanged
{
    private string _name;
    private int _age;

    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            OnPropertyChanged();
        }
    }

    public int Age
    {
        get { return _age; }
        set
        {
            _age = value;
            OnPropertyChanged();
        }
    }

    public ICommand SubmitCommand { get; }

    public MainViewModel()
    {
        SubmitCommand = new RelayCommand(OnSubmit);
    }

    private void OnSubmit()
    {
        // Perform action when button is clicked
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

এখানে:

• INotifyPropertyChanged ইন্টারফেসটি ViewModel এর প্রপার্টি পরিবর্তন হলে View কে অবগত করতে ব্যবহৃত হয়।
• RelayCommand একটি সাধারণ ICommand ইমপ্লিমেন্টেশন, যা কমান্ড এক্সিকিউট করার জন্য ব্যবহৃত হয়।

XAML এ Command ব্যবহারের উদাহরণ

Command ব্যবহার করলে, UI উপাদান (যেমন Button) এর সাথে ViewModel এর কমান্ড সম্পর্কিত লজিক বাইন্ড করা হয়।

<Button Content="Submit" Command="{Binding SubmitCommand}" Width="100" Height="30" Margin="10,100,10,10" />

এখানে:

• Command প্রপার্টি ViewModel এর SubmitCommand এর সাথে বাইন্ড করা হয়েছে। ফলে, বাটন ক্লিক করলে SubmitCommand কমান্ড এক্সিকিউট হবে।

উপসংহার

XAML ব্যবহার করে View তৈরি করার মাধ্যমে UI এর গঠন এবং লেআউট ডিফাইন করা হয়। Data Binding এবং Command Patterns এর মাধ্যমে View এবং ViewModel এর মধ্যে কার্যকর যোগাযোগ তৈরি হয়, যা অ্যাপ্লিকেশনটিকে ক্লিন, রিইউজেবল এবং মেইনটেনেবল করে তোলে। ViewModel থেকে ডেটা বাইন্ডিং এবং কমান্ড প্যাটার্ন ব্যবহারের মাধ্যমে UI এবং বিজনেস লজিকের মধ্যে একটি পরিষ্কার সেপারেশন আসে।